<template>
  <div id="home-view">
    <div class="content">
      <!--<TopViews/>-->
      <LeftCharts v-if="home_state!=='history_single'&&home_state!=='realtime_single'&&home_state!=='style_loading'"/>
      <RightList :warnList="warnList" :caseList="caseList" v-if="home_state!=='history_single'&&home_state!=='realtime_single'&&home_state!=='history_hotMap'&&home_state!=='style_loading'"/>
      <CarLegend v-if="home_state==='realtime'"/>
      <StateButton v-if="home_state!=='style_loading'"/>
      <SearchPanel v-if="home_state!=='style_loading'"/>

      <HotMapControl v-if="home_state==='history_hotMap'"/>
      <SingleHistoryAxis :XData="historyXData" :YData="historyYData" v-if="home_state==='history_single'"/>
      <SingleHistoryWarn v-if="home_state==='history_single'" :warnDataObj="warnDataObj"/>
      <SingleHistoryInfo :carInfo="carInfo" :pathInfo="pathInfo" :illegalInfo="illegalInfo" v-if="home_state==='history_single'||home_state==='realtime_single'"/>
      <MapStyleSwitch v-show="home_state==='realtime'"/>
    </div>
  </div>
</template>

<script>
  import {mapGetters, mapMutations} from 'vuex'
  import LeftCharts from './homeViews/leftCharts.vue'
  import TopViews from './homeViews/titleView.vue'
  import RightList from './homeViews/rightList.vue'
  import CarLegend from './homeViews/carLegend.vue'
  import StateButton from './homeViews/stateButton.vue'
  import SearchPanel from './homeViews/searchPanel.vue'
  import HotMapControl from './homeViews/hotMapControl.vue'
  import MapStyleSwitch from './homeViews/MapStyleSwitch.vue'
  import SingleHistoryAxis from './homeViews/singleHistory/singleHistoryAxis.vue'
  import SingleHistoryWarn from './homeViews/singleHistory/singleHistoryWarn.vue'
  import SingleHistoryInfo from './homeViews/singleHistory/singleHistoryInfo.vue'
  import HomeViewCtroller from '../service/homeViewCtroller'
  import DateTimeHelper from '../util/datetime-helper'
  import eventBus from '../util/event-bus'
  export default {
    name: 'HomeView',
    data () {
      return {
        warnList: null,   //右侧实时预警列表
        caseList: null,   //右侧实时应急案件列表

        illegalList:[],  //违规信息列表
        carInfo:{},   //车辆基本信息
        pathInfo:{},  //轨迹信息
        illegalInfo:[],  //轨迹信息

        warnDataObj: {},
        historyXData:[],    //单车历史图表数据
        historyYData:[],
      }
    },
    mounted(){
      this.controller = new HomeViewCtroller(this);
      this.controller.getCaseList(0);   //查询全部
      eventBus.$on('updateSingleWarnList',(sTime,eTime) => {
        this.controller.getIllegalInfo();
      });
      eventBus.$on('updateGlobalWarnList',(type) => {
        this.controller.getCaseList(type);
      });
      eventBus.$on("updateAlarmCar",() => {
        this.controller.getCarInfo();
      });
    },
    computed: {
      ...mapGetters(['home_state','single_car','loading_state','company_info','single_time','alarmInfo']),
    },
    components: {
      LeftCharts,
      TopViews,
      RightList,
      CarLegend,
      StateButton,
      SearchPanel,
      HotMapControl,     //历史热力图播放控件
      SingleHistoryAxis,  //单车历史播放
      SingleHistoryWarn,   //单车历史违规信息
      SingleHistoryInfo,   //单车历史基本信息
      MapStyleSwitch,
    },
    methods:{
      ...mapMutations(['updateLoadingState','updateSingleCar']),
      setHisSingleData(){
        this.controller.getHistoryPath();
        this.controller.getWarnList();
        this.controller.getCarInfo();
        this.controller.getPathInfo();
      },
      setRealSingleData(){
        this.controller.getCarInfo();
      },
      setWarnObj(warnInfo) {
        let warnObj = {
          warnName: warnInfo.warnName,
          speed: warnInfo.speed + "km/h",
          time: warnInfo.time,
          place: warnInfo.place,
        };
        return warnObj;
      },

      setTimeFormat(timeStr) {
        let tempArr = [];
        if (timeStr.toString().indexOf("-") !== -1) {
          timeStr.split("-").map((time, index) => {
            if (tempArr[0] && tempArr[0].split(" ")[0] === DateTimeHelper.timestampToTime(time).split(" ")[0]) {   //同一天
              tempArr.push(DateTimeHelper.timestampToTime(time).split(" ")[1]);
            } else {
              tempArr.push(DateTimeHelper.timestampToTime(time));
            }
          });
        } else {
          tempArr.push(DateTimeHelper.timestampToTime(timeStr));
        }
        return tempArr.join(" ~ ");
      },

      getTimeLine(time) {
        if (time.toString().indexOf("-") !== -1) {
          let timeArr = time.split("-");
          let minTime = (parseInt(timeArr[1]) - parseInt(timeArr[0])); //分钟数
          return minTime;
        }
      }
    },
    watch:{
      home_state(newVal, oldVal){
        switch (newVal) {
          case 'realtime':
            break;
          case 'history_hotMap':
            break;
          case 'history_single':
            this.setHisSingleData();
            break;
          case 'realtime_single':
            this.setRealSingleData();
            break;
          case 'company_group':
            this.controller.getCaseList(this.company_info.id);
            break;
          default:
            break;
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../static/common/common.scss";

  #home-view {
    width: 100%;
    height: $min-height;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    padding: 20px 5px;
    box-sizing: border-box;
    overflow-x: hidden;
    pointer-events: none;
    .content{
      position: relative;
      width: 100%;
      height: 100%;
    }
  }
</style>
